
<!DOCTYPE html>
<html>
<head>
    <title> 管理后台登陆</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
    <style type="text/css">
        body{background-color:#f5f5f5;}
        .login-head{position:fixed;left:0;top:0;width:80%;height:60px;line-height:60px;background:#000;padding:0 10%;}
        .login-head h1{color:#fff;font-size:20px;font-weight:600}
        .login-box{margin:240px auto 0;width:400px;background-color:#fff;padding:15px 30px;border-radius:10px;box-shadow: 5px 5px 15px #999;}
        .login-box .layui-input{font-size:15px;font-weight:400}
        /*.login-box input[name="password"]{letter-spacing:5px;font-weight:800}
        .login-box input[name="re_password"]{letter-spacing:5px;font-weight:800}*/
        .login-box .layui-btn{width:100%;}
        .login-box .copyright{text-align:center;height:50px;line-height:50px;font-size:12px;color:#ccc}
        .login-box .copyright a{color:#ccc;}
    </style>
</head>
<body>
<div class="login-head">
    <h1>  </h1>
</div>
<div class="login-box">
    <form action="{:U('Public/checklogin')}" method="post" class="layui-form layui-form-pane">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>绑定用户手机号</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="tel" name="tel" class="layui-input" lay-verify="required" placeholder="请输入手机号" autofocus="autofocus" lay-verify="phone">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <input type="text" id="code" name="code" class="layui-input" lay-verify="required" placeholder="请输入短信验证码" style="width: 50%; display: inline;">
                 <input type="button" id="getcode" value="发送验证码" class="layui-btn" style="width: 40%; display: inline;">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登陆密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" class="layui-input" lay-verify="required" placeholder="请设置密码" lay-verify="pass">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="re_password" class="layui-input" lay-verify="required" placeholder="请再次输入密码" lay-verify="pass">
            </div>
        </div>

        <!-- <input type="hidden" name="__token__" value="a0eb3a1d68c5eb2e53a697f7d5635c213dcef66f" /> -->
        <input type="submit" value="马上绑定" lay-submit="" lay-filter="*" class="layui-btn layui-btn-warm">
    </form>
    <div class="copyright">
        © 2017-2018 <a href="https://www.58zltc.com" target="_blank">  </a> All Rights Reserved.
    </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function daojishi(i){
    i--;
    if(i>0){
        $("#getcode").val(i+"s");
        window.setTimeout('daojishi('+i+')',1000);
    }else{
        $("#getcode").val("发送验证码");
        $("#getcode").removeClass('layui-btn-disabled');

    }
}
layui.use(['layer', 'form'], function(){
    var layer = layui.layer
    ,form = layui.form;

    form.on('submit(*)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        $.post("{:U('register')}", data.field,function(e){
            layer.alert(e.info,function(index){
                if(e.status){
                    location.href = e.url;
                }else{
                    layer.close(index);
                }
            });
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    // layer.msg('Hello World');

    $("#getcode").click(function(){
        var tel = $("#tel").val();
        if(!tel){
            layer.alert('请输入手机号！');
            return;
        }
        $.post("{:U('get_code')}",{tel:tel},function(e){
            layer.alert(e.info);
            if(e.status){
                $("#getcode").addClass('layui-btn-disabled');
                $("#getcode").val("60s");
                window.setTimeout('daojishi(60)',1000);
            }
        })
    })
});
</script>
</body>
</html>